<template>
    <el-dialog :visible="visible" @close="onCancel">
        <slot></slot>
        <div v-if="action" class="action">
            <el-button size="small" type="cancel" @click="onCancel">取消</el-button>
            <el-button size="small" type="confirm" @click="onConfirm">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "KDialog",
        props: {
            show: Boolean,
            action: {
                type: Boolean,
                default: true
            }
        },
        data () {
            return {
                visible: false
            }
        },
        watch: {
            show (v) {
                this.visible = v
            },
            visible (v) {
                this.$emit('update:show', v)
            }
        },
        methods: {
            onCancel () {
                this.$emit('cancel')
                this.$emit('update:show', false)
            },
            onConfirm () {
                this.$emit('confirm')
                this.$emit('update:show', false)
            }
        },
        mounted () {
            this.visible = this.show
        }
    }
</script>

<style scoped lang="scss">
    .action {
        text-align: right;
    }
    .el-button--confirm {
        color: #fff;
        background: #00CCCC;
        border-color: #00CCCC;
        &:hover {
            background: #00E6E6;
            border-color: #00E6E6;
        }
    }
</style>